<template>
  <div class="basepage-report">
    <div class="panel-search-top">
      <div class="form">
        <el-form ref="form" :inline="true" size="mini">
          <el-form-item label-width="0px">
            <el-input placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary">查询</el-button>
          </el-form-item>
          <el-form-item label="类别" label-width="60px">
            <el-select placeholder="类别" value="">
              <el-option label="类别" value="类别"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="button-group-operate">
        <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button>
        <el-button icon="el-icon-editor" @click="handleAdd(1)">编辑</el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
        <el-button icon="el-icon-export" @click="dialogExport=true">导出</el-button>
      </div>
    </div>
    <div v-if="viewFlag==1" class="datalist">
      <div class="pagecontent">
        <div class="panel">
          <div class="panel-con">

            <el-table :data="json.portraitC1" @row-click="rowclick">
              <el-table-column prop="c1" label="序号"></el-table-column>
              <el-table-column prop="c2" label="名称"></el-table-column>
              <el-table-column prop="c3" label="报表类型"></el-table-column>
              <el-table-column prop="c1" label="报表对象"></el-table-column>
              <el-table-column prop="c2" label="更新时间"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="viewFlag==2" class="detial-panel">
      <el-row>
        <el-col :span="3">
          <div class="detail-search">
            <el-form :inline="true" class="demo-form-inline" size="mini">
              <el-form-item label-width="0px">
                <el-input placeholder="输入过滤字段"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-tree :data="menu.menudata" :props="menu.defaultProps"></el-tree>
        </el-col>
        <el-col :span="21">
          <el-tabs class="base-tabs" v-model="tabs.isActive">
            <el-tab-pane label="事件" name="tab1">
              <el-row>
                <el-col :span="3">
                  <el-table class="eventtable" @row-click="eventrowclick" :row-class-name="tableRowClassName" :data="eventlist" height="250" :show-header="false">
                    <el-table-column fixed prop="title" label="">
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="21" class="echart-panel">
                  <div v-if="eventindex==0">
                    <el-form :inline="true" size="mini">
                      <el-form-item label="展现方式">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-checkbox-group>
                          <el-checkbox label="独立数统计" name="type"></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary">确定添加</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c1" :data="diagramEcharts.c1" :show="diagram.c1" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==1">
                    <el-form size="mini" :model="formdata.form2">

                      <el-form-item class="" :key="index" v-for="(value, index) in formdata.form2.times" label-size="0px">
                        <el-col :span="5">
                          <el-input v-model="value.v1"> </el-input>
                        </el-col>
                        <el-col class="line" style="text-align:center" :span="1">-</el-col>
                        <el-col :span="5">
                          <el-input v-model="value.v2"> </el-input>
                        </el-col>
                        <el-col class="line" style="text-align:center" :span="1">
                          <a @click="deleteForm2(index)">删除</a>
                        </el-col>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <a class="input-row-add" @click="addForm2()">添加数值分段</a>
                      </el-form-item>

                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c2" :data="diagramEcharts.c2" :show="diagram.c2" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                    <el-table :data="json.portraitC1">
                      <el-table-column prop="c1" label="时间段"></el-table-column>
                      <el-table-column prop="c2" label="时间段"></el-table-column>
                      <el-table-column prop="c2" label="变化率"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="eventindex==2">
                    <el-form size="mini" :model="formdata.form3">
                      <el-form-item label="数值字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="" :key="index" v-for="(value, index) in formdata.form3.values" label-size="0px">
                        <el-col :span="3">
                          <el-input v-model="value.v1"> </el-input>
                        </el-col>
                        <el-col class="line" style="text-align:center" :span="1">-</el-col>
                        <el-col :span="3">
                          <el-input v-model="value.v2"> </el-input>
                        </el-col>
                        <el-col class="line" style="text-align:center" :span="1">
                          <a @click="deleteForm3(index)">删除</a>
                        </el-col>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <a class="input-row-add" @click="addForm3()">添加数值分段</a>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c3" :data="diagramEcharts.c3" :show="diagram.c3" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==3">
                    <el-form size="mini">
                      <el-form-item label="时间间隔">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c4" :data="diagramEcharts.c4" :show="diagram.c4" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==4">
                    <el-form :inline="true" size="mini">
                      <el-form-item label="数值字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="数值间隔">
                        <el-input></el-input>
                      </el-form-item>
                      <br />
                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c5" :data="diagramEcharts.c5" :show="diagram.c5" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==5">
                    <el-form :inline="true" size="mini">
                      <el-form-item label="字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="展示方式" class="miniselect">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="TOP" class="miniselect">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <div class="cir">
                        <diagram-echarts ref="echart_c61" :data="diagramEcharts.c61" :show="diagram.c61" bg="#fff" type="style2"></diagram-echarts>
                      </div>
                    </div>
                    <el-table :data="json.portraitC1">
                      <el-table-column prop="c1" label="选择"></el-table-column>
                      <el-table-column prop="c1" label="名称"></el-table-column>
                      <el-table-column prop="c2" label="事件数"></el-table-column>
                    </el-table>
                    <div class="c1">
                      <diagram-echarts ref="echart_c62" :data="diagramEcharts.c62" :show="diagram.c62" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==6">
                    <el-form :inline="true" size="mini" :model="formdata.form7">
                      <el-form-item label="Y轴字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="分组">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="统计" class="miniselect">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="展示方式" class="miniselect">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <el-button type="primary">确定</el-button>
                      </el-form-item>
                    </el-form>
                    <div class="c1">
                      <diagram-echarts ref="echart_c7" :data="diagramEcharts.c7" :show="diagram.c7" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>
                  <div v-if="eventindex==7">
                    <el-form size="mini" :model="formdata.form8">
                      <el-form-item label="字段">
                        <el-select value="" placeholder="请选择">
                          <el-option label="选择1" value="1"></el-option>
                          <el-option label="选择2" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label-size="0px">
                        <a class="input-row-add" @click="addForm8()">添加百分比分段</a>
                      </el-form-item>
                      <div class="moreinput">
                        <el-form-item :key="index" v-for="(value, index) in formdata.form8.values" label-size="0px">
                          <el-input v-model="value.value">
                            <el-button @click="deleteForm8(index)" slot="append" icon="el-icon-search"></el-button>
                          </el-input>
                        </el-form-item>
                      </div>
                      <el-form-item label-size="0px">
                        <el-button type="primary">生成图表</el-button>
                      </el-form-item>
                    </el-form>
                    <el-table :data="json.portraitC1">
                      <el-table-column prop="c1" label="值(< =）"></el-table-column>
                      <el-table-column prop="c2" label="百分比"></el-table-column>
                    </el-table>
                    <div class="c1">
                      <diagram-echarts ref="echart_c8" :data="diagramEcharts.c8" :show="diagram.c8" bg="#fff" type="style4"></diagram-echarts>
                    </div>
                  </div>

                </el-col>
              </el-row>

            </el-tab-pane>
            <!-- <el-tab-pane label="统计" name="tab2">统计</el-tab-pane> -->
          </el-tabs>
        </el-col>
      </el-row>

    </div>

    <el-dialog :title="`${dialogAddTitle}报表`" width="650px" :visible.sync="dialogAdd">
      <el-form ref="form" label-width="136px" label-position="right" size="mini">
        <el-form-item label="名称">
          <el-input v-model="dialogAddForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对象">
          <el-select value="" placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="X轴">
          <el-select placeholder="请选择类别">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Y轴起">
          <el-col :span="9">
            <el-input></el-input>
          </el-col>
          <el-col class="line" :span="1">至</el-col>
          <el-col :span="9">
            <el-input></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="buttonlist base-dialog-bom-btn-c">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogAdd = false" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
         是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="报表名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogExport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Data from "../../data/index";
import diagramEcharts from "../../components/portrait/echarts";
export default {
  name: "",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      menu: {
        menudata: [
          {
            label: "overview",
            children: [
              {
                label: "二级 1-1",
                children: [
                  {
                    label: "三级 1-1-1"
                  }
                ]
              }
            ]
          },
          {
            label: "apache",
            children: [
              {
                label: "dcisbb"
              },
              {
                label: "shcucibds "
              },
              {
                label: "dcisbb"
              },
              {
                label: "shcucibds "
              },
              {
                label: "dcisbb"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
          label: "label"
        }
      },
      tabs: {
        isActive: "tab1"
      },
      formdata: {
        form2: {
          times: [{ v1: 1, v2: 1 }, { v1: 2, v2: 2 }]
        },
        form3: {
          values: [{ v1: 1, v2: 1 }, { v1: 2, v2: 2 }]
        },
        form8: {
          values: [{ value: "1%" }, { value: "2%" }]
        }
      },
      eventindex: 5,
      eventlist: [
        {
          title: "事件计数"
        },
        {
          title: "时间分段"
        },
        {
          title: "数值分段"
        },
        {
          title: "时间直方图 "
        },
        {
          title: "数值直方图"
        },
        {
          title: "字段值分类"
        },
        {
          title: "字段数值"
        },
        {
          title: "累计百分比"
        }
      ],
      viewFlag: 2, //1 列表  2图表
      dialogAdd: false,dialogAddTitle:'创建',dialogDelete:false,dialogSave:false,dialogInport:false,dialogExport:false,
      json: {
        portraitC1: Data.portraitC1
      },
      diagram: {
        c1: true,
        c2: true,
        c3: true,
        c4: true,
        c5: true,
        c61: true,
        c62: true,
        c7: true,
        c8: true
      },
      diagramEcharts: {
        c1: {
          yname: "个/秒",
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 23, 10, 15]
            }
          ]
        },
        c2: {
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "bar",
              barWidth: 115,
              data: [25, 10, 23, 10, 15]
            }
          ]
        },
        c3: {
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "bar",
              barWidth: 115,
              data: [25, 10, 23, 10, 15]
            }
          ]
        },
        c4: {
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "bar",
              barWidth: 22,
              data: [25, 10, 23, 10, 15],
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#64A9ED" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#7AC3FD" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        },

        c5: {
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "bar",
              barWidth: 22,
              data: [25, 10, 23, 10, 15],
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#64A9ED" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#7AC3FD" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        },
        c61: {
          legend: {
            orient: "vertical",
            right: 60,
            top: 40,
            data: [
              {
                name: "1",
                icon: "roundRect"
              },
              {
                name: "2",
                icon: "roundRect"
              },
              {
                name: "3",
                icon: "roundRect"
              },
              {
                name: "4",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          color: [
            "#06bba4",
            "rgba(248,154,0,1)",
            "rgba(91,150,237,1)",
            "rgba(225,104,77,1)"
          ],
          series: [
            {
              name: "CPU",
              type: "pie",
              radius: ["50%", "75%"],
              center: ["50%", "50%"],
              data: [
                { value: 335, name: "1" },
                { value: 310, name: "2" },
                { value: 234, name: "3" },
                { value: 135, name: "4" }
              ]
            }
          ]
        },
        c62: {
          yname: " ",
          color: ["rgba(6, 187, 164, 1)", "rgba(248, 154, 0, 1)"],
          isboundaryGap: false,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 23, 10, 15],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(6, 187, 164, 1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 15, 23, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248, 154, 0, 1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        },
        c7: {
          yname: " ",
          color: [
            "rgba(6, 187, 164, 1)",
            "rgba(248, 154, 0, 1)",
            "rgba(225, 104, 77, 1)",
            "rgba(91, 150, 237, 1)"
          ],
          isboundaryGap: false,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 23, 10, 15]
            },
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 15, 23, 10]
            },
            {
              type: "line",
              barWidth: 22,
              data: [10, 15, 25, 10, 23]
            },
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 15, 23, 10]
            }
          ]
        },
        c8: {
          yname: " ",
          color: ["rgba(0, 121, 106, 1)"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "line",
              barWidth: 22,
              data: [25, 10, 23, 10, 15]
            }
          ]
        }
      }
    };
  },
  components: {
    diagramEcharts
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    handleAdd(type)  {
      this.dialogAdd = true;if(type==1){this.dialogAddTitle="编辑";}
    },
    rowclick() {
      this.viewFlag = 2;
      console.log("aaaa");
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
      if (rowIndex === this.eventindex) {
        return "active-row";
      }
      return "";
    },
    eventrowclick(row, event, column) {
      this.eventindex = row.index;
    },
    addForm8() {
      this.formdata.form8.values.push({ value: "" });
    },
    deleteForm8(index) {
      this.formdata.form8.values.splice(index, 1);
    },
    addForm3() {
      this.formdata.form3.values.push({ value: "" });
    },
    deleteForm3(index) {
      this.formdata.form3.values.splice(index, 1);
    },
    addForm2() {
      this.formdata.form2.times.push({ value: "" });
    },
    deleteForm2(index) {
      this.formdata.form2.times.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" >
@import url(../../assets/css/base.css);

.basepage-report {
  .el-dialog__body .el-input--mini .el-input__inner {
    width: 206px;
  }

  .detail-search {
    .el-input--mini .el-input__inner {
      width: 125px;
      height: 24px;
      margin-left: 20px;
    }
  }
  .active-row td {
    background: rgba(203, 203, 203, 1) !important;
  }

  .miniselect {
    .el-form-item__content {
      width: 100px;
    }
  }

  .eventtable {
    background: rgba(240, 240, 240, 1);
    tr td {
      background: rgba(240, 240, 240, 1);
      cursor: pointer;
    }
  }

  .moreinput {
    .el-form-item {
      display: inline-block;
      margin-right: 10px;
      .el-input--mini {
        width: 76px;
        .el-input__inner {
          width: 100%;
          padding: 0px;
          padding-left: 5px;
          border-right: none;
        }
        .el-input-group__append {
          background: transparent !important;
          height: 20px !important;
          .el-button {
            background: transparent;
            height: 100%;
            border: none;
            box-shadow: none;
          }
        }
      }
    }
  }
}
</style>
 
<style scoped lang="scss">
.button-group-operate {
  float: right;
}
.form {
  float: left;
}
.appright {
  background: #fff;
}
.pagecontent {
}

.detial-panel {
  .detail-search {
    height: 28px;
    background: linear-gradient(180deg, #f7f7f7 0%, #f3f3f3 100%);
  }
}
.pagecontent {
  padding: 20px;
}
.basepage-report {
  background: #fff;
}
.echart-panel {
  padding: 10px 20px;
}

.c1 {
  height: 200px;
  .cir {
    height: 100%;
    width: 50%;
  }
}

.input-row-add {
  color: rgba(63, 134, 255, 1);
  padding-left: 20px;
  background: url(../../assets/add_icon.png) no-repeat left center;
}
</style>
